<template>
    <a-modal v-model:visible="visible" width="100%" :wrap-class-name="'full-modal-dark'" :footer="null"
        destroyOnClose>
        <template #title>
            <span>{{ Status.title }} {{ Status.nickname }}</span>
            <!-- &nbsp;&nbsp;&nbsp;
            <a-switch v-model:checked="theme">
                <template #checkedChildren>
                    <U_Sun />
                </template>
                <template #unCheckedChildren>
                    <U_Moon />
                </template>
            </a-switch> -->
            &nbsp;&nbsp;&nbsp;
            <a-button type="default" size="small" @click="download">下载代码</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="default" size="small" @click="ImageVisible = true">原型图</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="primary" size="small" @click="InspectAnsStatus = true">打分</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="primary" size="small" @click="BackStatus">退回</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="primary" size="small" @click="SaveCode">保存代码</a-button>
        </template>
        <replView ref="replViewContent" :Codes="Codes" />
    </a-modal>
    <ImagePereviewVue v-model:show="ImageVisible" :Path="imagePath" />
    <InspectAnsVue v-if="InspectAnsStatus" v-model:show="InspectAnsStatus" :Status="Status" @SetValue="SetValue" />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import replView from '../_replView/index.vue'
import ImagePereviewVue from '../_imagePreview/index.vue'
import InspectAnsVue from './InspectAns.vue';
import { UseUIStore } from '../../store/UI'
import DownloadFiles from '@/_libs/DownloadFiles';
const UI = UseUIStore();
const emit = defineEmits(['update:show', 'SetValue', 'BackStatus', 'SaveCode']);

const props = defineProps({
    show: Boolean,
    Status: {
        type: Object,
        default: () => { return {} }
    },
});

const replViewContent = ref();
const InspectAnsStatus = ref(false);
const ImageVisible = ref<boolean>(false);
// const theme = ref<boolean>(UI.classType == 'dark');
const visible = ref<boolean>(props.show);
const imagePath = ref<string[]>(props.Status.imagePath.split(';'))
const Codes = ref<string>(props.Status.Code);
// console.log(props.Status);


watch(() => props.show, (val) => {
    visible.value = val
})

watch(visible, (val) => {
    emit('update:show', val)
})

// watch(theme, () => {
//     UI.changeTheme();
// });


function SetValue(data: any) {
    emit('SetValue', data);
}


const BackStatus = () => {
    emit('BackStatus');
}

const SaveCode = () => {
    emit('SaveCode', replViewContent.value.GetCodes());
}

const download = () => {
    DownloadFiles(Codes.value, props.Status.title + '(' + props.Status.nickname + ')')
}

</script>